<template>
    <div class="main_orderInfo">
        <div class="link_orderInfo">
            <router-link to="/goHome/{username}" class="router_orderInfo">回到首页</router-link>
            <router-link to="/orderList" class="router_orderInfo">返回订单列表</router-link>
        </div>

        <el-table class="orderInfo" :data="orderInfo" border="true" row-style="height: 40px">
            <el-table-column prop="orderid" label="orderId"></el-table-column>
            <el-table-column prop="itemid" label="itemId" ></el-table-column>
            <el-table-column prop="quantity" label="quantity"></el-table-column>
            <el-table-column prop="price" label="price"></el-table-column>
            <el-table-column prop="unitprice" label="total"></el-table-column>
        </el-table>
        <el-row :gutter="20" class="el-row">
            <el-col :span="8" :offset="2">
            <el-card class="billing_address" >
                <template #header>
                    Billing Address
                </template>
                <el-form :model="order" label-width="120px">
                    <el-form-item label="First name:" class="item_orderInfo">
                        <el-input v-model="order.billtofirstname" class="input_orderInfo"/>
                    </el-form-item>
                    <el-form-item label="Last name:" class="item_orderInfo">
                        <el-input v-model="order.billtolastname"  class="input_orderInfo"/>
                    </el-form-item>
                    <el-form-item label="Address 1:" class="item_orderInfo">
                        <el-input v-model="order.billaddr1"  class="input_orderInfo"/>
                    </el-form-item>
                    <el-form-item label="Address 2:" class="item_orderInfo">
                        <el-input v-model="order.billaddr2"  class="input_orderInfo"/>
                    </el-form-item>
                    <el-form-item label="City:" class="item_orderInfo">
                        <el-input v-model="order.billcity"  class="input_orderInfo"/>
                    </el-form-item>
                    <el-form-item label="State:" class="item_orderInfo">
                        <el-input v-model="order.billstate" class="input_orderInfo" />
                    </el-form-item>
                    <el-form-item label="Zip:" class="item_orderInfo">
                        <el-input v-model="order.billzip" class="input_orderInfo" />
                    </el-form-item>
                    <el-form-item label="Country:" class="item_orderInfo">
                        <el-input v-model="order.billcountry" class="input_orderInfo" />
                    </el-form-item>

                </el-form>
                </el-card>
            </el-col>
            <el-col :span="8" :offset="4">
            <el-card class="shipping_address">
                <template #header>
                    Shipping Address
                </template>
                <el-form :model="order" label-width="120px">
                    <el-form-item label="First name:" class="item_orderInfo">
                        <el-input v-model="order.shiptofirstname" class="input_orderInfo" />
                    </el-form-item>
                    <el-form-item label="Last name:" class="item_orderInfo">
                        <el-input v-model="order.shiptolastname" class="input_orderInfo" />
                    </el-form-item>
                    <el-form-item label="Address 1:" class="item_orderInfo">
                        <el-input v-model="order.shipaddr1" class="input_orderInfo" />
                    </el-form-item>
                    <el-form-item label="Address 2:" class="item_orderInfo">
                        <el-input v-model="order.shipaddr2" class="input_orderInfo" />
                    </el-form-item>
                    <el-form-item label="City:" class="item_orderInfo">
                        <el-input v-model="order.shipcity" class="input_orderInfo" />
                    </el-form-item>
                    <el-form-item label="State:" class="item_orderInfo">
                        <el-input v-model="order.shipstate" class="input_orderInfo" />
                    </el-form-item>
                    <el-form-item label="Zip:" class="item_orderInfo">
                        <el-input v-model="order.shipzip" class="input_orderInfo" />
                    </el-form-item>
                    <el-form-item label="Country:" class="item_orderInfo">
                        <el-input v-model="order.shipcountry" class="input_orderInfo" />
                    </el-form-item>
                </el-form>
            </el-card>
            </el-col>
        </el-row>
        <el-button @click="updateOrderInfo" type="primary" class="updateMsg">修改信息</el-button>
    </div>
</template>

<script>
import axios from 'axios'
import { jwtDecode } from 'jwt-decode';

export default {
    name:   'OrderInfo',
    data(){
        return {
            token : localStorage.getItem('token'),
            username:jwtDecode(localStorage.getItem('token')).username,
            orderId : this.$route.params.id,
            orderInfo:'',
            order:''
        }
    },
    methods:{
        updateOrderInfo(){
            console.log(this.order)
            this.putOrder()
        },
        //使用结构赋值进行错误处理
        promise_error_process(promise){
            return promise.then(result=>[null,result])
                           .catch(err=>[err,null])
        },
        async getOrderByAjax(){
            const response = await axios({
                url : `http://localhost:8081/orders/${this.orderId}`,
                method : 'GET',
                withCredentials : true,
                headers :{
                    'Authorization': this.token // 将token放在请求头中
                }
            })
            return response
        },
        async getOrder(){
            const [err,result] = await this.promise_error_process(this.getOrderByAjax())
            if(err){
                console.log(err)
            }else{
                console.log(result.data.data.ordercartitem)
                this.orderInfo = result.data.data.ordercartitem
                this.order = result.data.data
                console.log(this.orderInfo)
                console.log(this.order)
            }
        },
        async putOrderByAjax(){
            const response = await axios({
                url : `http://localhost:8081/orders/${this.orderId}`,
                method : 'PUT',
                withCredentials : true,
                headers :{
                    'Content-Type' : 'application/json',
                    'Authorization': this.token // 将token放在请求头中
                },
                data : this.order 
            })
            return response
        },
        async putOrder(){
            const [err,result] = await this.promise_error_process(this.putOrderByAjax())
            if(err){
                console.log(err)
            }else{
                console.log(result)
            }
        }
    },
    created() {
        this.getOrder()           //在模版渲染成HTML之前赋值
    }
}
</script>

<style scoped>

.main_orderInfo{
    text-align: center;
    overflow: hidden;
}
.link_orderInfo{
    font-size: 20px;
    text-align: left;
    padding: 50px;
}
.router_orderInfo{
    font-size: 20px;
    text-decoration: none;
    margin-left: 30px;
}
.orderInfo{
    width: 60%;
    margin-left: 20%;
    font-size: 20px;
    margin-bottom: 30px;
}
.billing_address{
    font-size: 20px;
}
.shipping_address{
    font-size: 20px;
}
.input_orderInfo{
    transform: translateY(-5px);
}
.updateMsg{
    margin: 50px;
}
</style>